// hooks就是封装一些方法
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { onUnmounted, ref } from 'vue'
export function useLazyLoad(fn: () => void) {
  // 要滚动到对应楼层,再去发送对应楼层的请求(组件数据懒加载)
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      fn() // fn是一个要调用的方法
      stop()
    }
  }, {
    // threshold这个属性是配置 何时去触发加载 值是0-1之间的一个值, 默认是0.3
    threshold: 0 // 只要目标元素进入可视区就发送请求, 值越大发送请求越晚
  })
  return target // 就是空的ref对象 要和 组件内的那个dom进行绑定
}
// 倒计时的hook
export function useCountDown(num: number = 60) {
  const time = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    time.value--
    if (time.value <= 0) pause()
  }, 1000, { immediate: false })
  // 开始 赋值起始值并开始运行倒计时
  const start = () => {
    time.value = num
    resume()
  }
  return {
    time,
    start
  }
  // 组件销毁后,清除定时器, 这个工作不需要我们做(useIntervalFn内部做了)
  // onUnmounted(() => {
  //   pause()
  // })
}